'use strict';  
import React, { Component } from 'react';  
import {StyleSheet, View, Image, Text, Animated, Easing} from 'react-native';
  
export default class Loading extends Component {
  constructor(props) {  
    super(props);  
     this.state={
      rotation: new Animated.Value(0)
    }
  }
  componentDidMount() {
    this.startAnimate();
  }
  startAnimate(){
    this.state.rotation.setValue(0);
    Animated.timing(this.state.rotation, {
      toValue: 1,
      duration: this.props.duration || 1000,
      easing: this.props.easing || Easing.linear
    }).start(()=>{this.startAnimate()}); 
  }
  render() {  
    return (
      <View style={[styles.container,this.props.bgStyle]}>
        <Animated.Image
          source={this.props.sourceIcon || require('../images/loading_big.png')}
          style={[styles.loadImg,{
            transform: [{
              rotateZ: this.state.rotation.interpolate({
                inputRange: [0,1],
                outputRange: ['0deg', '360deg']
              })
            }]
          },this.props.style]}/>
        <Text>加载中</Text>
      </View>
    )
  }
} 
const styles = StyleSheet.create({  
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f6f6f6',
  },
  loadImg: {
    marginBottom: 20,
  }
});  